<div class="email-form">
  <form nz-form [formGroup]="idapConfigForm" role="form">
    <nz-divider nzText="LDAP服务器设置" nzOrientation="left"></nz-divider>

    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>LDAP服务器名称：</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input type='text' placeholder="LDAP Server" formControlName="serverName">
            <nz-form-explain *ngIf="!(idapConfigForm.get('serverName').valid || idapConfigForm.get('serverName').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('serverName').hasError('required')">名称不能为空！</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>LDAP类型：</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input type='text' autocomplete="off" placeholder="OpenLDAP" formControlName="ladpType">
            <nz-form-explain *ngIf="!(idapConfigForm.get('ladpType').valid || idapConfigForm.get('ladpType').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('ladpType').hasError('required')">类型不能为空!</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>主机名：</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <nz-input-group nzAddOnBefore="Idap://">
              <input type="text" nz-input autocomplete="off" placeholder="ad.hf.janine" formControlName="hostName" />
            </nz-input-group>
            <nz-form-text class="input-extra-text">运行LDAP的服务器的主机名。例如：ldap.example.com</nz-form-text>
            <nz-form-explain *ngIf="!(idapConfigForm.get('hostName').valid || idapConfigForm.get('hostName').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('hostName').hasError('required')">主机名不能为空!</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>端口</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <nz-input-number [nzMin]="1"  [nzStep]="1"  [(ngModel)]="portNumber"
              formControlName="port"></nz-input-number>
            <nz-form-explain *ngIf="!(idapConfigForm.get('port').valid || idapConfigForm.get('port').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('port').hasError('required')">端口不能为空!</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
     </div>
    </div>
    <nz-divider nzText="LDAP服务器设置" nzOrientation="left"></nz-divider>
    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
      <div nz-col nzSpan="12">
       <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>Base DN:</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input type='text' autocomplete="off" formControlName="baseDn">
            <nz-form-text class="input-extra-text">LDAP中的根节点，用于搜索用户和组。例如: cn=users,dc=example,dc=com</nz-form-text>
            <nz-form-explain *ngIf="!(idapConfigForm.get('baseDn').valid || idapConfigForm.get('baseDn').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('baseDn').hasError('required')">Base DN不能为空!</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>Additional User DN:</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input type='text' autocomplete="off" formControlName="usersDn">
            <nz-form-text class="input-extra-text">在搜索用户时添加到基本DN以限制范围</nz-form-text>
            <nz-form-explain *ngIf="!(idapConfigForm.get('usersDn').valid || idapConfigForm.get('usersDn').untouched)">
              <span class="text-danger" *ngIf="idapConfigForm.get('usersDn').hasError('required')">Base DN不能为空!</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
       </div>
    </div>
    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary" class="modal-footer-btn"
              (click)="addIdapConfig()" [disabled]="!idapConfigForm.valid">修改配置</button>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

</div>
